<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>EZOPEN播放协议</title>
  <style>
    body {
      margin: 0;
    }
    .hint {
      font-size: 14px;
      line-height: 3em;
      color: gray;
    }
    #url,
    #url2,
    #accessToken {
      width: 100%;
    }

    .btn-container {
      margin: 10px;
    }
    .normal {
      color: green;
      margin: 5px;
    }
    .error {
      color: red;
      margin: 5px;
    }
  </style>
</head>
<script>
</script>

<body>
  <script src="../ezuikit.js"></script>
  <!-- <script src="../js/jsPlugin-1.2.0.js"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js"></script> -->
  <div class="hint">demo页面仅为代码示例无法直接运行，需要部署到服务器上才可以播放。另外监控模式与多窗口模式对浏览器版本有要求：Chrome: 55+ Firefox: V55+。</div>
  <script src="../js/jquery.min.js"></script>
  <h2>预览，回放 多窗口模式示例：</h2>
  <!-- <p>ezopen地址用逗号分隔</p> -->
  <textarea id="url" placeholder="这里输入ezopen地址"></textarea>
  <textarea id="accessToken" placeholder="这里输入accessToken"></textarea>
  <div class="btn-container">
    <button id="init">开始初始化</button>
    <button id="start">初始化播放</button>
    <button id="stop">全部结束</button>
  </div>
  <div id="playWind" style="width: 1200px; height: 800px;">
  </div>
  <script>
    var decoder;
    $("#init").click(function () {
      var url = $('#url').val().trim();
      var accessToken = $('#accessToken').val().trim();
      decoder = new EZUIKit.EZUIPlayer({
        id: 'playWind',
        autoplay: true,
        url: url,
        accessToken: accessToken,
        decoderPath: '../',
        width: 1200,
        height: 800,
        splitBasis: 2, // 1*1 2*2 3*3 4*4
      });
      // 这里是打印日志，本例抛出到播放页面
      decoder.on('log', log);
      function log(str,className) {
        var div = document.createElement('DIV');
        div.className=className || 'normal';
        div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
        document.body.appendChild(div);
      }
      $("#start").click(function () {
        decoder.play({
          //index:[0,1],
          // handleError: handleError,
          // handleSuccess: handleSuccess,
        });
      })
    })
    $("#stop").click(function () {
        var url = $('#url').val().trim();
        var urlList = [];
        if(url.length >0){
          urlList = url.split(',');
        }
        for(var i = 0; i<urlList.length; i++){
          if(urlList[i] && urlList[i].length>0){
            decoder.stop(i);
          }
        }
      })

  </script>
</body>

</html>